<template>
  <div>
    <div class="search-content">
      <Col class="panel content-header" :span="24">
      <div class="title-bar cf">
        <h5 class="fl">
          <span>
            <a href="javascript:void(0);" class="link" @click="backToLast">
              <i class="fa fa-angle-left" aria-hidden="true"></i>返回上一页</a>
            <span class="dashboard-card-sep">|</span>
            <span class="dashboard-card-name"><span>周负荷详情</span></span>
          </span>
        </h5>
      </div>
      </Col>
    </div>
    <div>
      <Row>
        <Col span="24" style="padding:10px;box-sizing:border-box;">
        <DatePicker style="width:240px;" type="daterange" :options="options" class="time-picker" v-model="timeDate" @on-change="onTimeChange" placement="bottom-end" placeholder="请选择日期..." show-week-numbers></DatePicker>
        </Col>
        <!-- 折线图 -->
        <Col span="24" class="panel map-panel" style="margin-bottom:15px;">
        <div style="width:100%;height:350px;">
          <div ref="chart" style="width: 100%;height: 100%;"></div>
        </div>
        </Col>
        <!-- 表格 -->
        <Col class="panel table-panel" :span="24" style="overflow-x: auto;margin-bottom: 20px;">
        <AnalTable v-if="tableData.length !=0 " :tableData="tableData" :tableStyle="{ width:'100%' }"></AnalTable>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex"
import AnalTable from "../AnalTable"
import { getFuhe } from "@/api"
import mixin from "./mixin"
import utils from "@/utils/utils"
const { isBlankArray } = utils

export default {
  mixins: [mixin],
  computed: { ...mapGetters(["color"]) },

  mounted() {
    this.initState()
  },
  components: { AnalTable },
  data: () => ({
    tableData: [],
    echartInstence: null
  }),
  methods: {
    onTimeChange() {
      const vm = this
      if (Array.isArray(vm.timeDate)) {
        const value = vm.timeDate
        if (isBlankArray(value)) {
          vm.timeDate = [
            vm
              .moment()
              .add(-6, "days")
              .format(),
            vm.moment().format()
          ]
        }
        const timeStart = vm.moment(vm.timeDate[0]),
          timeEnd = vm.moment(vm.timeDate[1]),
          days = timeEnd.diff(timeStart, "days")
        if (days === 7) {
          vm.initData()
        } else {
          vm.$Message.error("只能选择7天")
        }
      }
    },

    initState() {
      const { id, name } = this.$route.params
      const vm = this,
        timeDate = vm.timeDate
      const date = [
          ...vm.timeDate.map(t => vm.moment(t).format("YYYY-MM-DD"))
        ].join("~"),
        params = {
          deviceNo: id,
          date
        }
      vm.$nextTick(() => {
        const dom = vm.$refs.chart
        vm.echartInstence = vm.echarts.init(dom)
        vm.echartInstence.showLoading({ text: "", color: "red" })
        getFuhe(params).then(res => {
          if (res.code === 200 && res.data) {
            vm.printChart(res.data.list, name, date)
            try {
              vm.tableData = [
                {
                  key: "最大负荷(kW)",
                  value: res.data.maxFuhe
                },
                {
                  key: "发生时间",
                  value: vm
                    .moment(res.data.maxFuheDate)
                    .format("YYYY-MM-DD HH:mm:ss")
                },
                {
                  key: "最小负荷(kW)",
                  value: res.data.minFuhe
                },
                {
                  key: "发生时间",
                  value: vm
                    .moment(res.data.minFuheDate)
                    .format("YYYY-MM-DD HH:mm:ss")
                },
                {
                  key: "平均负荷(kW)",
                  value: res.data.avgFuhe
                },
                {
                  key: "峰谷差(kW)",
                  value: res.data.diffFuhe
                },
                {
                  key: "峰谷差率(%)",
                  value: (res.data.diffRate * 100).toFixed(2) + "%"
                },
                {
                  key: "负荷率(%)",
                  value: (res.data.fuheRate * 100).toFixed(2) + "%"
                }
              ]
            } catch (e) {
              return false
            }
          } else {
            this.$Message.error(res.message)
            vm.echartInstence.hideLoading()
            vm.echartInstence.clear()
            vm.tableData = []
          }
        })
      })
    },

    printChart(array, name, date) {
      const vm = this
      const series = array.map(t => t.value)
      const xRay = array.map(t => vm.moment(t.valueDate).format("HH:mm"))
      let option = {
        title: {
          text: name,
          left: "center",
          subtext: date
        },
        color: [...vm.color],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          },
          formatter(params) {
            const data = params[0]
            return `${data.data} kW<br/>${data.marker} ${data.seriesName} ${
              data.axisValue
            }`
          }
        },
        legend: {
          bottom: 0
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "50"
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xRay
        },
        yAxis: {
          name: "kW",
          type: "value"
        },
        series: [
          {
            type: "line",
            name: date,
            data: series
          }
        ]
      }
      vm.echartInstence.setOption(option)
      vm.echartInstence.hideLoading()
    },

    backToLast() {
      this.$router.go(-1)
    }
  }
}
</script>
